import React, { Component } from 'react'

let count = 0;
export default class Ceshi extends Component {
    constructor(props) {
        super(props)

        this.state = {
            count
        }
    }

    componentWillMount() {
        // const {count} = this.state
        this.setState({
            count: ++count
        })

        this.setState({
            count: ++count
        })

        setTimeout(() => {
            this.setState({
                count: ++count
            })

            this.setState({
                count: ++count
            })
        }, 1000)
    }

    componentDidMount() {
        this.button2.addEventListener("click", this.onClick3.bind(this, "原生浏览器事件"), false)
    }

    onClick1(info) {
        console.log(info, count, this.state.count)
        for(let i = 0; i<3; i++) {
            this.setState({
                count: ++count
            })
        }
        console.log(this.state.count, "btn1")
    }

    onClick2(info) {
        console.log(info, count, this.state.count)
        setTimeout(() => {
            for(let i = 0; i<3; i++) {
                this.setState({
                    count: ++count
                })
            }
            console.log(this.state.count, "btn2")
        }, 0)
    }

    onClick3(info) {
        console.log(info, count, this.state.count)
        for(let i = 0; i<3; i++) {
            this.setState(({count}) => {
                return {
                    count: ++count
                }
            })
        }
        console.log(this.state.count, "btn3")
    }
  render() {
      console.log(this.state.count, "render")
    return (
      <div>
          <button type='button' ref={node => this.button = node} onClick={this.onClick1.bind(this, "React事件")}>生成新计数1</button>
          <button type='button' ref={node => this.button = node} onClick={this.onClick2.bind(this, "React事件")}>生成新计数2</button>
          <button type='button' ref={node => this.button2 = node} >生成新计数3</button>
          <div>Count: {this.state.count}</div>
      </div>
    )
  }
}
